<template>
  <div>
    <div
      :class="[
        `relative lg:m-3  dark:bg-zinc-900 xl:dark:bg-zinc-800 duration-200 rounded-sm pb-1 h-[${Number(item.computeditemSize)}] w-[${Number(item.computeditemSize)}] shadow-lg`
      ]"
      ref="itemContainer"
    >
      <div class="w-full h-[60%] dark:bg-zinc-900 rounded-sm">
        <img
          :key="item.item.id"
          :src="item.item.cover"
          class="bg-transparent w-[60%] h-[160px] rounded-sm"
        />
        <!-- 已经点赞 -->
        <My-button
          v-if="useuserStore.likes.includes(Number(item.item.id))"
          class="bg-zinc-400 absolute top-0 right-0 like_button"
          type="primary"
          icon="heart"
          :iconColor="
            useuserStore.likes.includes(Number(item.item.id)) ? '#ff4d4f' : ''
          "
          :data-likes="item.item.like"
          @click="cancelLike(item.item.id)"
        >
        </My-button>
        <!--未点赞-->
        <My-button
          v-else
          class="bg-zinc-400 absolute top-0 right-0 like_button"
          type="primary"
          icon="heart"
          iconColor="#ffffff"
          :data-likes="item.item.like"
          @click="addLike(item.item.id)"
        >
        </My-button>
        <My-button
          class="absolute top-4 right-0"
          type="primary"
          icon="search"
          iconColor="#ffffff"
          @click="showPhoto(item.item.cover)"
        />
        <My-button
          type="primary"
          class="bg-zinc-400 absolute top-8 right-0"
          icon="share"
          iconColor="#ffffff"
        />
        <My-button
          type="primary"
          icon="download"
          class="absolute top-12 right-0"
          iconColor="#ffffff"
          @click="
            userDownLoad(
              item.item.title,
              useuserStore.user_id,
              item.item.category_id
            )
          "
        />
        <div
          @click="showPhoto(item.item.cover)"
          class="absolute top-0 left-0 w-[60%] h-[160px] bg-black/70 rounded-sm flex items-center justify-center text-xl text-white font-medium opacity-0 group-hover:opacity-100 cursor-zoom-in"
        ></div>
      </div>
      <p
        @click="goDetail(item.item.id, $event)"
        class="text-sm cursor-pointer mt-1 font-bold text-zinc-900 dark:text-zinc-300 px-2"
      >
        {{ item.item.title }}
      </p>
      <div class="flex cursor-pointer items-center mt-1 px-1">
        <img :src="item.avatar" alt="" class="w-2 h-2 rounded-full mr-1" />
        <span class="text-sm text-zinc-500 dark:text-zinc-200"> </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import useCardList from '@/store/CardList'
import useUser from '@/store/user/index.js'
import { useDebounceFn } from '@vueuse/core'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
const useCardListStore = useCardList()
const useuserStore = useUser()
const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

// 定义 showPhoto 函数
const showPhoto = (photo) => {
  useCardListStore.showPhotoComponent({
    src: photo,
    show: true,
    position: 'body'
  })
}
// 点赞
const addLike = useDebounceFn((article_id) => {
  useuserStore.userAddLike(article_id)
}, 1000)
// 取消点赞
const cancelLike = useDebounceFn((article_id) => {
  //判断用户点赞列表中是否有目前文章id如果有则进行删除
  useuserStore.userCancelLike(article_id)
}, 1000)
// 用户下载文章
const userDownLoad = (article_title, user_id, category_id) => {
  useuserStore.userDownLoad(article_title, user_id, category_id)
}

// 获取点击位置的相对坐标
const itemContainer = ref(null)
const goDetail = (id, event) => {
  const { left, top } = itemContainer.value.getBoundingClientRect()
  // 计算相对于元素的位置
  const offsetX = event.clientX - left
  const offsetY = event.clientY - top
  router.push(`/home/${id}`)
}
</script>

<style lang="scss" scoped>
.like_button::after {
  content: attr(data-likes);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #ffffff;
  margin-top: -14px;
  z-index: 100;
}
</style>
